<template>
	<view class="practice">
    <statusBar></statusBar>
		<uni-nav-bar left-icon="back" :title="practiceName"></uni-nav-bar>
		<view style="height:10px;background-color: #f2f2f2;"></view>
		<view class="practice-list">
			<view class="practice-title">
				{{ activeIndex + 1 }}、{{ activeQue.QueTitle }}
				<text v-if="activeQue.QusTypeId == 1">单选题</text>
				<text class="duoxuantext" v-if="activeQue.QusTypeId == 2">多选题</text>
				<text class="panduantext" v-if="activeQue.QusTypeId == 3">判断题</text>
			</view>
			<view style="height:10px;background-color: #f2f2f2;"></view>

			<radio-group @change="radioChange($event,activeIndex)" v-if="activeQue.QusTypeId != 2">
				<label v-if="activeQue.QueOptionA">
					<view>
						<radio value="A" :checked="checkedItem[0]" />
					</view>
					<view>{{activeQue.QueOptionA}}</view>
				</label>
				<label v-if="activeQue.QueOptionB">
					<view>
						<radio value="B" :checked="checkedItem[1]" />
					</view>
					<view>{{activeQue.QueOptionB}}</view>
				</label>
				<label v-if="activeQue.QueOptionC">
					<view>
						<radio value="C" :checked="checkedItem[2]" />
					</view>
					<view>{{activeQue.QueOptionC}}</view>
				</label>
				<label v-if="activeQue.QueOptionD">
					<view>
						<radio value="D" :checked="checkedItem[3]" />
					</view>
					<view>{{activeQue.QueOptionD}}</view>
				</label>
				<label v-if="activeQue.QueOptionE">
					<view>
						<radio value="E" :checked="checkedItem[4]" />
					</view>
					<view>{{activeQue.QueOptionE}}</view>
				</label>
				<label v-if="activeQue.QueOptionF">
					<view>
						<radio value="F" :checked="checkedItem[5]" />
					</view>
					<view>{{activeQue.QueOptionF}}</view>
				</label>
			</radio-group>

			<checkbox-group v-model="queModel[activeIndex]" @change="CheckboxChange($event,activeIndex)" v-if="activeQue.QusTypeId == 2">
				<label v-if="activeQue.QueOptionA">
					<checkbox value="A" :checked="checkedItem[0]" /><text>{{activeQue.QueOptionA}}</text>
				</label>
				<label v-if="activeQue.QueOptionB">
					<checkbox value="B" :checked="checkedItem[1]" /><text>{{activeQue.QueOptionB}}</text>
				</label>
				<label v-if="activeQue.QueOptionC">
					<checkbox value="C" :checked="checkedItem[2]" /><text>{{activeQue.QueOptionC}}</text>
				</label>
				<label v-if="activeQue.QueOptionD">
					<checkbox value="D" :checked="checkedItem[3]" /><text>{{activeQue.QueOptionD}}</text>
				</label>
				<label v-if="activeQue.QueOptionE">
					<checkbox value="E" :checked="checkedItem[4]" /><text>{{activeQue.QueOptionE}}</text>
				</label>
				<label v-if="activeQue.QueOptionF">
					<checkbox value="F" :checked="checkedItem[5]" /><text>{{activeQue.QueOptionF}}</text>
				</label>
			</checkbox-group>

			<view class="queanalysis" v-show="analysis == true">
				<view class="isright" v-if="queModel[activeIndex].length > 0" :class="{'iserror': activeQue.Answer != answerArr[activeIndex]}">{{ erMessage }}</view>
				<view class="isanswer">答案: {{ activeQue.Answer }}</view>
				<view class="is">解析: {{ activeQue.QueAnalysis }}</view>
				<view class="istongji"></view>
			</view>

			<view class="btngroup">
				<button v-if="activeQue.QusTypeId == 2" @click="confirmDuo(activeIndex)">确认提交</button>
				<button @click="goPrev">上一题</button>
				<button @click="goNext">下一题</button>
				<button @click="showAnswer">查看答案</button>
			</view>

			<view class="wline"></view>
		</view>

		<view class="footlist">
			<view class="footcount" @click="showQueList">
				<image src="../../static/img/exam/list.png"></image>
				<text class="footcount-num">
					<text>{{ activeIndex + 1 }}</text>
					/ {{ queList.length }}
				</text>
			</view>
			<view class="footlistbtn">
        <button @click="clearAnswer">清空进度</button>
				<button @click="colTF">{{isShoucang}}</button>
				<button @click="errpop = true">纠错</button>
			</view>
		</view>

		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>

		<popup-layer ref="popup" direction="top">
			<view class="quelist">
				<view class="quelisthead">
					答题卡（
					<text>{{ activeIndex + 1 }}</text>
					/ {{ queList.length }} ）
				</view>
				<view class="cardlist">
					<view @click="jumpQue(index)" v-for="(item, index) in queList" :key="index" class="card-list" :class="(answerArr[index] == queList[index].Answer && 'queright') || (answerArr[index].length >= 1 && answerArr[index] != queList[index].Answer && 'querror')">
						{{ index + 1 }}
					</view>
				</view>
			</view>
		</popup-layer>

		<view class="errpop" v-if="errpop == true">
			<view class="errpopcontent">
				<view class="errpop-title">纠错</view>
				<view class="errpop-center">
					<view class="errpop-ot">错误描述</view>
					<textarea v-model="jiucuoMiaoshu" />
					<view class="errpop-ot">联系方式</view>
          <input v-model="jiucuoPhone" type="text" />
          <button @click="confirmJiucuo">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
import popupLayer from '@/components/popup-layer/popup-layer.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';

export default {
  components: {
    popupLayer,
    uniPopup,
    statusBar
  },
  data() {
    return {
      parcticeId: '',
      activeIndex: 0,
      errpop: false,
      type: '',
      practiceName: '',
      erMessage: '',
      queList: [],
      queModel: [],
      answerArr: [],
      analysis: false,
      queType: '',
      colList: [],
      jiucuoMiaoshu: '',
      jiucuoPhone: '',
      activeQue: [],
      checkedItem: [false,false,false,false,false,false],
      isShoucang: '',
    };
  },
  onLoad: function(option) {
    this.parcticeId = option.id;
    this.getQueList(option.id);
  },
  created() {
    
  },
  methods: {
    radioChange(evt, index) {
      var obj = {};
      this.checkedItem = [false,false,false,false,false,false];
      this.queModel[index] = evt.detail.value;
      this.answerArr[index] = evt.detail.value;
      if(this.queModel[index] == this.queList[index].Answer){
        this.erMessage = '正确';
				obj.IsCorrect = true;
      }else{
        this.erMessage = '错误';
				obj.IsCorrect = false;
      }
      this.analysis = true;
      if(evt.detail.value == 'A'){
        this.checkedItem[0] = true;
      }else if(evt.detail.value == 'B'){
        this.checkedItem[1] = true;
      }else if(evt.detail.value == 'C'){
        this.checkedItem[2] = true;
      }else if(evt.detail.value == 'D'){
        this.checkedItem[3] = true;
      }else if(evt.detail.value == 'E'){
        this.checkedItem[4] = true;
      }else if(evt.detail.value == 'F'){
        this.checkedItem[5] = true;
      }
			obj.RightAnswer = this.activeQue.Answer;
      obj.ChapterId = this.parcticeId;
      obj.QueId = this.activeQue.QueId;
      obj.Title = this.activeQue.QueTitle;
      obj.Options = this.activeQue.QueOptionA + ';' + this.activeQue.QueOptionB + ';' + this.activeQue.QueOptionC + ';' + this.activeQue.QueOptionD + ';' +
      this.activeQue.QueOptionE + ';' + this.activeQue.QueOptionF;
      obj.Options = obj.Options.replace(/null;/gi, "");
      obj.Options = obj.Options.replace(/null/gi, "");
      obj.UserChoice = evt.detail.value;
      obj = JSON.stringify(obj);
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/SysAnswerHistory/SubmitForm',
        data: obj,
        success: res => {
          console.log(res);
        }
      });
    },
    CheckboxChange(evt, index) {
      this.checkedItem = [false,false,false,false,false,false];
      this.queModel[index] = evt.detail.value;
      if(evt.detail.value.indexOf('A') != -1){
        this.checkedItem[0] = true;
      }
      if(evt.detail.value.indexOf('B') != -1){
        this.checkedItem[1] = true;
      }
      if(evt.detail.value.indexOf('C') != -1){
        this.checkedItem[2] = true;
      }
      if(evt.detail.value.indexOf('D') != -1){
        this.checkedItem[3] = true;
      }
      if(evt.detail.value.indexOf('E') != -1){
        this.checkedItem[4] = true;
      }
      if(evt.detail.value.indexOf('F') != -1){
        this.checkedItem[5] = true;
      }
    },
    //多选确认
    confirmDuo: function(index) {
      var obj = {};
      var answerStr = this.queModel[index].sort().toString();
      answerStr = answerStr.replace(/,/g, '');
      this.answerArr[index] = answerStr;
      var answerArrs = this.queList[index].Answer.split('');
      if (answerArrs.toString() == this.queModel[index].toString()) {
        this.erMessage = '正确';
        obj.IsCorrect = 'true';
      } else {
        this.erMessage = '错误';
        obj.IsCorrect = 'false';
      }
      this.analysis = true;
			obj.RightAnswer = this.queList[index].Answer;
      obj.ChapterId = this.parcticeId;
      obj.QueId = this.queList[index].QueId;
      obj.Title = this.queList[index].QueTitle;
      obj.Options = this.queList[index].QueOptionA + ';' + this.queList[index].QueOptionB + ';' + this.queList[index].QueOptionC + ';' + this.queList[index].QueOptionD + ';' +
      this.queList[index].QueOptionE + ';' + this.queList[index].QueOptionF;
      obj.Options = obj.Options.replace(/null;/gi, "");
      obj.Options = obj.Options.replace(/null/gi, "");
      obj.UserChoice = answerStr;
			
      obj = JSON.stringify(obj);
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/SysAnswerHistory/SubmitForm',
        data: obj,
        success: res => {
          //console.log(res);
        }
      });
      
    },
    //上一题
    goPrev: function() {
      this.activeIndex--;
      if (this.activeIndex < 0) {
        this.activeIndex = 0;
      }
      this.activeQue = this.queList[this.activeIndex];
      this.analysis = false;
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
    },
    //下一题
    goNext: function() {
      if (this.activeIndex == this.queList.length - 1) {
        this.activeIndex = this.queList.length - 1;
      } else {
        this.activeIndex++;
      }
      this.activeQue = this.queList[this.activeIndex];
      this.analysis = false;
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
    },
    //查看答案
    showAnswer: function() {
      this.analysis = !this.analysis;
    },
    //展示答题卡
    showQueList: function() {
      this.$refs.popup.show();
    },
    //点击答题卡跳转
    jumpQue: function(index) {
      this.activeIndex = index;
      this.$refs.popup.close();
      this.analysis = false;
      this.activeQue = this.queList[this.activeIndex];
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
    },
    colTF: function(id, index) {
      var obj = {};
      obj.QueId = this.activeQue.QueId;
      obj.ColQueId = this.activeQue.ColQueId;
      obj.IsCollected = !this.activeQue.IsCollected;
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Practice/CancelOrCollect',
        data: JSON.stringify(obj),
        success: res => {
          console.log(res);
          if (res.statusCode == 200) {
            this.activeQue.IsCollected = !this.activeQue.IsCollected;
            if(this.activeQue.IsCollected == true){
              this.isShoucang = '取消收藏';
            }else{
              this.isShoucang = '收藏';
            }
            this.msg = '操作成功';
            this.togglePopup('middle');
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    confirmJiucuo: function() {
      this.errpop = false;
      
      if(this.jiucuoPhone == ''){
          this.msg = '请填写联系方式';
          this.togglePopup('middle');
          return false;
      }
      
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/SubmitQueError',
        data: {
          QueId: this.activeQue.QueId,
          content: this.jiucuoMiaoshu,
          contact: this.jiucuoPhone
        },
        success: res => {
          console.log(res);
          if (res.data.state == 'success') {
            this.msg = '提交成功';
            this.togglePopup('middle');
          } else {
            this.msg = '纠错失败';
            this.togglePopup('middle');
          }
        }
      });
    },
    //加载题目
    getQueList: function(pid) {
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Practice/GetAllQueByChapter?chapterId=' + pid + '',
        data: {},
        success: res => {
          if (res.data.state == 'success') {
            this.queList = res.data.data.queList;
			if(this.queList == undefined || this.queList.length <= 0){
				uni.navigateBack({
				    delta: 1
				});
				return;
			}
            this.colList = res.data.data.colList;
            for (let i = 0; i < this.queList.length; i++) {
              this.queModel.push([]);
              this.answerArr.push('');
              for(let k = 0; k < this.queList[i].QuestionOptions.length; k++){
                if(this.queList[i].QuestionOptions[k].checked == true){
                  this.queModel[i].push(this.queList[i].QuestionOptions[k].value);
                }
              }
             this.answerArr[i] = this.queModel[i].toString();
             this.answerArr[i] = this.answerArr[i].replace(/,/g, '');
            }
            this.practiceName = res.data.data.chapterName;
            this.activeQue = this.queList[0];
            if(this.activeQue.IsCollected == true){
              this.isShoucang = '取消收藏';
            }else{
              this.isShoucang = '收藏';
            }
            if(this.activeQue.UserChoice.indexOf('A') != -1){
              this.checkedItem[0] = false;
              this.checkedItem[0] = true;
            }
            if(this.activeQue.UserChoice.indexOf('B') != -1){
              this.checkedItem[1] = false;
              this.checkedItem[1] = true;
            }
            if(this.activeQue.UserChoice.indexOf('C') != -1){
              this.checkedItem[2] = false;
              this.checkedItem[2] = true;
            }
            if(this.activeQue.UserChoice.indexOf('D') != -1){
              this.checkedItem[3] = false;
              this.checkedItem[3] = true;
            }
            if(this.activeQue.UserChoice.indexOf('E') != -1){
              this.checkedItem[4] = false;
              this.checkedItem[4] = true;
            }
            if(this.activeQue.UserChoice.indexOf('F') != -1){
              this.checkedItem[5] = false;
              this.checkedItem[5] = true;
            }
            for (let i in this.checkedItem) {
              if(this.checkedItem[i] == true){
                this.analysis = true;
                if(this.activeQue.Answer != this.queModel[0].toString().replace(/,/g, '')){
                  this.erMessage = '错误';
                }else{
                  this.erMessage = '正确';
                }
              }
            }
            
            
            uni.hideLoading();
          } else {
            this.msg = '加载题目列表错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    //清空进度
    clearAnswer(){
      let vm = this;
      uni.showModal({
        content: '确定要清空答题进度吗？',
        success: function (res) {
          if (res.confirm) {
            let obj = {
              'chapterId': parseInt(vm.parcticeId)
            }
            uni.request({
              method: 'POST',
              header: {
                'Content-Type': 'application/json',
                Authorization: uni.getStorageSync('token')
              },
              url:  vm.apiUrl + 'api/student/Practice/ClearAnswerHistoryProgres',
              data: JSON.stringify(obj),
              success: res => {
                if (res.data.state == 'success') {
                  vm.activeIndex = 0
                  vm.checkedItem = [false,false,false,false,false,false]
                  vm.queModel = [],
                  vm.answerArr = [],
                  vm.getQueList(vm.parcticeId);
                  vm.msg = '清空成功';
                  vm.togglePopup('middle');
                } else {
                  vm.msg = '清空失败';
                  vm.togglePopup('middle');
                }
              }
            });
          } else if (res.cancel) {
            
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.practice-list {
  background-color: #ffffff;
}
.practice-title {
  padding: 15upx 20upx;
}
.practice-title text {
  display: inline-block;
  color: #ffffff;
  padding: 3upx 15upx;
  background-color: #27b28b;
  margin-left: 20upx;
  border-radius: 8px;
}
.practice-title text.duoxuantext {
  background-color: #0a9ce8;
}
.practice-title text.panduantext {
  background-color: #ff5979;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
}
wx-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  color: #27b28b !important;
}
uni-checkbox-group {
  display: block;
  padding-top: 40upx;
}
wx-checkbox-group {
  display: block;
  padding-top: 40upx;
}
uni-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
wx-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
uni-checkbox-group label uni-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-checkbox-group label wx-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
uni-radio-group {
  display: block;
  padding-top: 40upx;
}
wx-radio-group {
  display: block;
  padding-top: 40upx;
}
uni-radio-group label {
  display: flex;
  padding: 7px 15px;
}
wx-radio-group label {
  display: flex;
  padding: 7px 15px;
}
uni-radio-group label uni-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-radio-group label wx-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-radio .uni-radio-input {
  border-radius: 50px;
  border: none;
}
wx-radio .wx-radio-input {
  border-radius: 50px;
  border: none;
}
.btngroup {
  margin: 40upx auto;
}
.btngroup button {
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-left: 25upx;
  color: #595959;
}
.queanalysis {
  padding: 7px 15px;
}
.queanalysis .isright {
  color: #27b28b;
}
.queanalysis .iserror {
  color: #ff5979;
}
.footlist {
  height: 55px;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  text-align: right;
  line-height: 55px;
  border-top: #dddddd;
}
.footcount {
  height: 100%;
  padding: 0 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footcount image {
  width: 20px;
  height: 22px;
  vertical-align: text-bottom;
  margin-right: 20upx;
}
.footcount-num {
  font-size: 14px;
  color: #7e7e7e;
}
.footcount-num text {
  color: #27b28b;
  margin-right: 5px;
}
.footlistbtn {
  height: 100%;
  display: flex;
  align-items: center;
}
.footlistbtn button {
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-right: 25upx;
  background-color: #27b28b;
  color: #ffffff;
}
.quelist {
  background-color: #f2f2f2;
  height: 500px;
  overflow-y: scroll;
}
.quelisthead {
  background-color: #27b28b;
  color: #ffffff;
  height: 40px;
  text-align: center;
  font-size: 16px;
  background-color: #27b28b;
  line-height: 40px;
}
.quelisthead text {
  margin: 0 15upx;
  line-height: 40px;
}
.card-list {
  width: 100upx;
  height: 100upx;
  border-radius: 50px;
  background-color: #ffffff;
  line-height: 100upx;
  text-align: center;
  float: left;
  margin: 20upx 1upx 0upx 20upx;
}
.cardlist view.querror {
  background-color: #ff536b;
}
.cardlist view.queright {
  background-color: #27b28b;
}
.errpop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  background-color: rgba(0, 0, 0, 0.5);
}
.errpopcontent {
  width: 600upx;
  height: 800upx;
  background-color: #ffffff;
  margin: 260upx auto 0 auto;
  border-radius: 5px;
  overflow: hidden;
}
.errpop-title {
  height: 80upx;
  background-color: #27b28b;
  color: #ffffff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.errpop-center {
  padding: 0 40upx;
}
.errpop-ot {
  font-size: 16px;
  padding-top: 25px;
  padding-bottom: 20px;
}
.errpop-center textarea {
  width: 500upx;
  height: 140upx;
  padding: 10upx;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 13px;
}
.errpop-center input {
  height: 60upx;
  line-height: 60upx;
  padding-left: 20upx;
  border: 1px solid #dddddd;
}
.errpop-center button {
  width: 500upx;
  height: 60upx;
  line-height: 60upx;
  margin: 50upx auto 0 auto;
  background-color: #27b28b;
  padding: 0;
  color: #ffffff;
}
</style>
